<template>
    <view class="content">
        <view style="height:20rpx"></view>
        <view class="couplist" v-if="couponList.length > 0">
            <view class="con">
                <view class="left_box" v-for="(item, index) in  couponList" :key="index">
                    <view class="top_txt">
                        <text class="mon_box">￥</text><text class="num_box">100</text>
                    </view>
                    <view class="bot_txt">
                        <text>满元可用</text>
                    </view>
                </view>
                <view class="right_box">
                    <view class="top_txt_box">123</view>
                    <view class="bot_txt_box">使用日期：</view>
                </view>
                <view class="immediate_box" @click="immediateUse()">立即使用</view>
            </view>

        </view>
        <view class="youhuquan" v-else>
            <image src="https://mh.qingfentool.vip/upload/image/20230522/f4531b9efda28541e8c811554ed10626.png"
                mode="scaleToFill" />
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            couponList: [],// 优惠券列表
        }
    },
    onShow() {
        this.getInfo()
    },
    methods: {
        // 优惠券列表
        getInfo() {

        },
        // 立即使用优惠券
        immediateUse() {

        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    position: relative;

    .youhuquan {
        position: absolute;
        top: 200rpx;
        width: 575rpx;
        height: 538rpx;
        left: 0;
        right: 0;
        margin: auto;

        image {
            width: 100%;
            height: 100%;
        }
    }


    .couplist {
        position: relative;
        width: 710rpx;
        height: 180rpx;
        border-radius: 10rpx;
        padding-right: 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: auto;
        position: relative;
        margin-bottom: 20rpx;
        background: linear-gradient(146deg, #FFC95D 0%, #FFAF59 99%);
        position: relative;




        .con {
            margin-left: 35rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .immediate_box {
                position: absolute;
                width: 200rpx;
                height: 60rpx;
                text-align: center;
                line-height: 60rpx;
                right: 10rpx;
                top: 0;
                bottom: 0;
                margin: auto;
                background: #FF9E00;
                color: #fff;
                border-radius: 60rpx;

            }

            .left_box {
                width: 162rpx;
                height: 152rpx;

                .top_txt {
                    width: 126rpx;
                    height: 90rpx;
                    margin: 10rpx auto;

                    .mon_box {
                        font-size: 36rpx;
                        font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 46rpx;
                    }

                    .num_box {
                        font-size: 80rpx;
                        font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
                        font-weight: 400;
                        color: #FFFFFF;
                    }

                }

                .bot_txt {
                    // width: 140rpx;
                    height: 32rpx;
                    font-size: 24rpx;
                    font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 32rpx;
                    margin: auto;
                    text-align: center;
                }
            }

            .right_box {
                width: 436rpx;
                height: 152rpx;

                .top_txt_box {
                    width: 100%;
                    height: 52rpx;
                    font-size: 36rpx;
                    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
                    font-weight: 700;
                    color: #FFFFFF;
                    line-height: 52rpx;
                    text-align: center;
                    margin: 18rpx 0 40rpx;
                }

                .bot_txt_box {
                    width: 100%;
                    height: 28rpx;
                    font-size: 20rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 28rpx;
                    text-align: center;
                }
            }

        }

        .l_btns {
            width: 126rpx;
            margin-top: 60rpx;
        }

        .l_btn {
            width: 126rpx;
            height: 49rpx;
            border-radius: 49rpx;
            color: #FFFFFF;
            font-size: 24rpx;
            background: #FFD453;
        }

        .chehui {
            background: #C0C0C0;
        }
    }
}
</style>